<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <!--<meta charset="UTF-8">-->
    <!--<title>登录界面</title>-->

    <!--<link th:href="@{/css/bootstrap-3.3.7-dist/css/bootstrap.min.css}" rel="stylesheet">-->

    <!--<style>-->
        <!--.col-center-block {-->
            <!--float: none;-->
            <!--display: block;-->
            <!--margin-left: auto;-->
            <!--margin-right: auto;-->
        <!--}-->
    <!--</style>-->
    <meta charset="UTF-8">
    <title>管理员登录页面</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <style type="text/css">
        /*body*/
        /*{*/
        /*    margin:0;*/
        /*    padding: 0;*/
        /*    font-family: sans-serif;*/
        /*    !*background:#b2dba1;*!*/
        /*    !*background-size: cover;*!*/
        /*}*/
        *{
            font-family: "微软雅黑";
            font-size: 16px;
            border: 0;
            padding: 0;
            margin: 0;
            color: #666;
            box-sizing:border-box;
            -moz-box-sizing:border-box;
            -webkit-box-sizing:border-box;
        }
        .bgone{
            width: 100%;
            height: 100%;
            position: absolute;
            top:0;right: 0;left: 0;bottom: 0;margin: auto;
        }
        .pic{
            width: 492px;
            height: auto;
            position: absolute;
            top:173px;right: 453px;left: 0;bottom: 0;margin: auto;
            z-index: 99999;
        }
        /*.container*/
        /*{*/
        /*    position: absolute;*/
        /*    top:50%;*/
        /*    left: 50%;*/
        /*    transform: translate(-50%,-50%);*/
        /*    width:400px;*/
        /*    padding: 40px;*/
        /*    background: rgba(0,0,0,.8)*/
        /*    box-sizing : border-box;*/
        /*    box-shadow: 0 15px 25px rgba(0,0,0,.5);*/
        /*    border-radius: 10px;*/
        /*}*/
        .table1{
            background-color: #FFFFFF;
            width: 960px;
            height: 465px;
            position: absolute;
            top:20%;right: 0;left: 0;bottom: 0;margin: auto;
        }

        .wel{
            width: 960px;
            height: 35px;
            color: #fff;
            font-size: 30px;
            position: absolute;
            top: -7rem;
            text-align: center;
        }
        .wel1{
            width: 960px;
            height: 35px;
            color: #fff;
            font-size: 12.38px;
            position: absolute;
            top: -4rem;
            text-align: center;

        }
        .input1{
            height: 55px;
            width: 373px;
            text-indent: 55px;
            outline:none;
            background: #eef6fd;
            border-bottom:2px #d6e7fa solid ;
        }
        .user{
            position: absolute;
            top: 7.8rem;
            right:4rem;
            display: flex;
        }
        .password{
            position: absolute;
            top: 12.8rem;
            right: 4rem;
            display: flex;
        }
        .password input{
            border: 0;
        }
        .checkbox{
            position: absolute;
            display: flex;
        }
        .yonghu img{
            height: 30px;
            position: absolute;
            left: 10px;
            top: 13px;
        }
        /*.box input[type="submit"]*/
        /*{*/
        /*    background: transparent;*/

        /*    border: none;*/
        /*    outline:none;*/
        /*    color: #fff;*/
        /*    background: #03a9f4;*/
        /*    padding: 10px 20px;*/
        /*    cursor:pointer;*/
        /*    border-radius: 5px;*/
        /*}*/
        .btn{
            position: absolute;
            top: 18.5rem;
            right: 3.9rem;
            border: none;
            color: #fff;
            width: 373px;
            text-align: center;
            background-color: #1592ef;
            text-indent: 0rem;
            border-radius: 10px;
            text-shadow:2px 2px 1px rgba(0, 0, 0, 0.2);
            box-shadow:2px 2px 1px rgba(0, 0, 0, 0.2);
            font-size:20px ;
            height: 50px;
        }

    </style>

</head>
<body>
<img class="bgone" src="images/1.jpg" />
<img class="pic" src="images/a.png" />
    <div class="table1">
        <form action="/user/login" method="post">
            <div class="wel">管理员后台登录</div>
            <div class="wel1">GUAN LI YUAN HUO TAI DENG LU</div>
            <div class="user">
<!--                <label for="username" class="sr-only">用户名</label>-->
                <div class="yonghu"><img src="images/yhm.png" /></div>
                <input type="text" id="username" class="form-control input1" name="id" placeholder="Name"
                       required autofocus>
            </div>
            <div class="password">
<!--                <label for="inputPassword" class="sr-only">密码</label>-->
                <div class="yonghu"><img src="images/mm.png" /></div>
                <input type="password" id="inputPassword" class="form-control input1" name="userPassword"
                       placeholder="Password" required>
            </div>

<!--            <div class="checkbox">-->
<!--                <label> <input type="checkbox" value="remember-me">-->
<!--                    记住我-->
<!--                </label>-->
<!--            </div>-->
            <button class="btn btn-lg btn-primary btn-block" type="submit">登录</button>
        </form>


    </div>
</body>
</html>